<template>
  <div class="tool-url-img">
    <w-nav-bar
      title="网络图片识别"/>
    <group>
      <x-input
        placeholder="请输入链接"
        v-model="imageUrl"/>
    </group>
    <div
      class="image-show-bg w-text-center"
      v-if="imageUrl">
      <img
        class="img"
        style="width: 70%"
        :src="imageUrl"
        alt="">
    </div>
    <div class="w-max-btn">
      <x-button
        @click.native="dentifyButClick"
        :disabled="imageUrl ? false : true"
        type="primary">识别</x-button>
    </div>
    <!--识别出的数据-->
    <w-result
      ref="WResult"/>
  </div>
</template>

<script>
import { XInput, Group, XButton } from 'vux'
import WResult from './result'
export default {
  name: 'ToolUrlImage',
  components: {
    XInput,
    Group,
    XButton,
    WResult
  },
  data () {
    return {
      /**
       * 图片链接
       */
      imageUrl: ''
    }
  },
  methods: {
    /**
     * 确定按钮点击
     */
    dentifyButClick () {
      this.$refs['WResult'].imageDentify ('urlTextIdentify', {
        srcImge: this.imageUrl
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tool-url-img {
  .image-show-bg {
    margin-top: 10px;
  }
}


</style>
